<!DOCTYPE html>
<html   xmlns:th="http://www.thymeleaf.org">


<body>
<div class="container-fluid">

        <header th:fragment="top">
            <div id="mnav">
                <h2>
                    <span class="navicon"></span>
                </h2>
                <ul>
                    <li><a th:href="@{/front/index.html}">网站首页</a></li>
                    <li th:each="type:${@blogs.geTypes()}"><a  th:href="@{'/front/list.html?typeId='+${type.id}}">[[${type.name}]]</a></li>
                </ul>
            </div>
            <div class="topnav">
                <nav>
                    <ul>
                        <li><a th:href="@{/front/index.html}" th:classappend="${typeId == null} ? 'head_text_color' : ''">网站首页</a></li>
                        <li th:each="type:${@blogs.geTypes()}" ><a th:classappend="${typeId == type.id} ? 'head_text_color' : ''"
                                th:href="@{'/front/list.html?typeId='+${type.id}}">[[${type.name}]]</a></li>
                    </ul>
                </nav>
            </div>
        </header>


    <div class="suspension"  th:fragment="qqchat" >
        <link rel="stylesheet" th:href="@{/qqchat/css/style.css}">
        <div class="suspension-box">
            <a href="javascript:;" class="a a-service "><i class="i"></i></a>
            <!--<a href="javascript:;" class="a a-service-phone "><i class="i"></i></a>-->
            <a href="javascript:;" class="a a-qrcode"><i class="i"></i></a>
            <!--<a href="" class="a a-cart"><i class="i"></i></a>-->
            <a href="javascript:;" class="a a-top"><i class="i"></i></a>
            <div class="d d-service">
                <i class="arrow"></i>
                <div class="inner-box">
                    <div class="d-service-item clearfix">
                        <a th:href="${@blogs.getAppSetInfo().qqchatUrl}" target="_blank" class="clearfix"><span class="circle"><i class="i-qq"></i></span><h3>咨询在线客服</h3></a>
                    </div>
                </div>
            </div>
            <!--<div class="d d-service-phone">
                <i class="arrow"></i>
                <div class="inner-box">
                    <div class="d-service-item clearfix">
                        <span class="circle"><i class="i-tel"></i></span>
                        <div class="text">
                            <p>服务热线</p>
                            <p class="red number">4001-021-758</p>
                        </div>
                    </div>
                    <div class="d-service-intro clearfix">
                        <p><i></i>功能和特性</p>
                        <p><i></i>价格和优惠</p>
                        <p><i></i>获取内部资料</p>
                    </div>
                </div>
            </div>-->
            <div class="d d-qrcode">
                <i class="arrow"></i>
                <div class="inner-box">
                    <div class="qrcode-img" ><img th:src="${@blogs.getAppSetInfo().applogo}" alt="" style="width: 150px;height: 150px;"></div>
                    <p>微信客服</p>
                </div>
            </div>

        </div>

        <script>
            $(document).ready(function(){

                /* ----- 侧边悬浮 ---- */
                $(document).on("mouseenter", ".suspension .a", function(){
                    var _this = $(this);
                    var s = $(".suspension");
                    var isService = _this.hasClass("a-service");
                    var isServicePhone = _this.hasClass("a-service-phone");
                    var isQrcode = _this.hasClass("a-qrcode");
                    if(isService){ s.find(".d-service").show().siblings(".d").hide();}
                    if(isServicePhone){ s.find(".d-service-phone").show().siblings(".d").hide();}
                    if(isQrcode){ s.find(".d-qrcode").show().siblings(".d").hide();}
                });
                $(document).on("mouseleave", ".suspension, .suspension .a-top", function(){
                    $(".suspension").find(".d").hide();
                });
                $(document).on("mouseenter", ".suspension .a-top", function(){
                    $(".suspension").find(".d").hide();
                });
                $(document).on("click", ".suspension .a-top", function(){
                    $("html,body").animate({scrollTop: 0});
                });
                $(window).scroll(function(){
                    var st = $(document).scrollTop();
                    var $top = $(".suspension .a-top");
                    if(st > 400){
                        $top.css({display: 'block'});
                    }else{
                        if ($top.is(":visible")) {
                            $top.hide();
                        }
                    }
                });

            });
        </script>

    </div>


    <footer th:fragment="footer">
        <p>
            Design by <a href="http://www.demoxy.com">DEMO程序园</a> <a href="javascript:void(0)">粤ICP备18119990号</a>
        </p>
    </footer>

</div>

</body>

</html>